<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id='app'>
  <h3>姓名:</h3>
  <span>{{name}}</span>
  <h3>工号:</h3>
  <span>{{pid}}</span>
  <h3>部门:</h3>
  <span>{{bu}}</span>
</div>
</body>
</html>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    let opt = {
      el: '#app',
      data: {
        name: '查询中...',
        pid: '',
        bu: ''
      }
    }
    let vm = new Vue(opt)
    setTimeout(() => {
      opt.data.name = '李小明'
      opt.data.pid = 'IT201133'
      opt.data.bu = '信息技术部'
    }, 2000)
  }, false)

  class Vue {
    constructor (opt) {
      this.opt = opt
      this.observe(opt.data)
      let root = document.querySelector(opt.el)
      this.compile(root)
    }

    // 为响应式对象 data 里的每一个 key 绑定一个观察者对象
    observe (data) {
      Object.keys(data).forEach(key => {
        let obv = new Observer()
        data['_' + key] = data[key]
        // 通过 getter setter 暴露 for 循环中作用域下的 obv，闭包产生
        Object.defineProperty(data, key, {
          get () {
            Observer.target && obv.addSubNode(Observer.target)
            return data['_' + key]
          },
          set (newVal) {
            obv.update(newVal)
            data['_' + key] = newVal
          }
        })
      })
    }

    // 初始化页面，遍历 DOM，收集每一个key变化时，随之调整的位置，以观察者方法存放起来
    compile (node) {
      [].forEach.call(node.childNodes, child => {
        if (!child.firstElementChild && /\{\{(.*)\}\}/.test(child.innerHTML)) {
          let key = RegExp.$1.trim()
          child.innerHTML = child.innerHTML.replace(new RegExp('\\{\\{\\s*' + key + '\\s*\\}\\}', 'gm'), this.opt.data[key])
          Observer.target = child
          this.opt.data[key]
          Observer.target = null
        } else if (child.firstElementChild) {
          this.compile(child)
        }
      })
    }
  }

  // 常规观察者类
  class Observer {
    constructor () {
      this.subNode = []
    }

    addSubNode (node) {
      this.subNode.push(node)
    }

    update (newVal) {
      this.subNode.forEach(node => {
        node.innerHTML = newVal
      })
    }
  }
</script>
